<template>
	<view class="">
		<!-- #ifdef H5 -->

		</u-navbar>
		<view @click="leftClick()" class="leftButton fixed-top ">
			<u-icon name="arrow-left" color="#A973FF" size="24"></u-icon>
		</view>
		<!-- #endif -->

		<!-- #ifndef H5 -->

		<u-navbar :fixed="false" title="达人详情" :autoBack="true" bg-color="#fff">
		</u-navbar>
		<!-- #endif -->


		<view class="swipe">
			<u-swiper :list="swipe" indicator indicatorMode="line" @click="bigimg" circular height="750rpx"
				imgMode="aspectFill"></u-swiper>
		</view>
		<!-- <image style="width: 100%; height: 750rpx;" :src="swipe[0]" mode="aspectFill"></image> -->

		<view class="infoView">
			<view class="flex-row-flex-start info">
				<view class="name">
					{{detil.nickname}}
				</view>
				<!-- <view class="real flex-row-center" v-if="detil.sex == '男'">
					<u-icon name="man" color="#fff" size="26rpx"></u-icon>
					{{detil.age}}
				</view>
				<view class="real flex-row-center" v-if="detil.sex == '女'">
					<u-icon name="woman" color="#fff" size="26rpx"></u-icon>
					{{detil.age}}
				</view> -->
				<view class="site_province flex-row-center">
					{{detil.site_province}}
				</view>

			</view>
			<view class="flex-row-flex-start info">
				
				
				<view class="age flex-row-center" v-if="detil.sex == '男'">
					<u-icon name="man" color="#FF7BAE" size="26rpx"></u-icon>
					{{detil.age}}
				</view>
				<view class="age flex-row-center" v-if="detil.sex == '女'">
					<u-icon name="woman" color="#FF7BAE" size="26rpx"></u-icon>
					{{detil.age}}
				</view>
				<view class="height flex-row-center">
					{{detil.height}} cm
				</view>
				<view class="weight flex-row-center">
					{{detil.weight}} kg
				</view>
			
			</view>
			<!-- <view class="info">
				<text>{{detil.site_province}} | 身高：{{detil.height}} cm | 体重：{{detil.weight}} kg</text>

			</view> -->
			<view class="info">
				达人简介：<text>{{detil.intro}} </text>
			</view>
		</view>
		<!-- <view class="rzView flex-row-space-between">
			<view @click="goImg(detil.qualification)" class="flex-row-space-between" style="height: 80rpx;width: 48%;">
				<view class="rzTitle">
					资质认证
				</view>
				<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
			</view>
			<view class="line">

			</view>
			<view @click="goImgH(detil.health_certificate)" class="flex-row-space-between"
				style="height: 80rpx;width: 48%;">
				<view class="rzTitle">
					健康建档
				</view>
				<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
			</view>
		</view> -->

		<view class="dtView" @click="goteacher()">
			<view class="flex-row-space-between" style="height: 80rpx;">
				<view class="dtTitle">
					TA最近的动态
				</view>
				<view class="flex-row-flex-end">
					<view class="dtTitle1">
						查看全部
					</view>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>

			</view>
			<view class=" flex-row-flex-start flex-wrap">
				<view v-if="!(video.length==0)" class="video-box">
					<view class="video-box1">
						<image :src="videoImage" mode="aspectFill"></image>
					</view>


					<view style="margin-top: -150rpx;" class="">
						<image src="/static/video.png"
							style="margin-left: 50rpx; width: 50rpx; height: 50rpx; margin-top: 50rpx;" mode=""></image>


					</view>



				</view>

				<image class="video-box" :src="it" v-if="index<imageIndex" v-for="(it,index) in images"
					mode="aspectFill"></image>





			</view>


		</view>

		<!-- <view class="xmView">
			<view class="flex-row-space-between" style="height: 88rpx;margin-left: 22rpx;">
				<view class="dtTitle">
					提供项目
				</view>
			</view>
			<view class="item flex-row-center" v-for="(item,index) in service">
				<view class="headView">
					<image :src="item.master_image" mode=""></image>
				</view>
				<view class="flex1">
					<view class=" flex-column-center1" style="height: 140rpx;">
						<view class="flex-row-space-between">
							<view class="xmName">
								{{item.name}}
							</view>
							<view @click="clkbt(item.service_id)" class="flex-row-flex-end">
								<view class="dtTitle1">
									查看详情
								</view>
								<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
							</view>
						</view>
						<view v-if="item.site" class="jiedan">
							接单地址:<text style="color: #D30202;">{{item.site}}</text>
						</view>
						<view v-else class="jiedan1">
							接单地址:
							<text style="color: #D30202;">{{item.site}}</text>

						</view>
						<view v-if="item.mininum_order_price" class="jiedan">
							最低消费:
							<text style="color: #D30202;">￥{{item.mininum_order_price }}</text>
						</view>
						<view v-else class="jiedan1">
							最低消费:
						</view>
					</view>
					<view class="flex-row-space-between">
						<view class="">
							<text class="price">￥</text>
							<text class="price1">{{item.price}}</text>
							<text class="price2">/{{item.duration}}小时</text>
						</view>
						<u-number-box v-model="item.number" min='0' @change='calculation()'>
							<view slot="minus" class="minus">
								<image style="width: 40rpx;height: 40rpx;" src="../../../static/techDeil/minus.png"
									mode=""></image>
								<!-- <u-icon name="minus" size="12"></u-icon> -->
		<!-- </view>
							<text slot="input" style="width: 50rpx;text-align: center;"
								class="input">{{item.number}}</text>
							<view slot="plus" class="plus">
								<!-- <u-icon name="plus" color="#FFFFFF" size="12"></u-icon> -->
		<!-- <image style="width: 40rpx;height: 40rpx;" src="../../../static/techDeil/add.png"
									mode=""></image>
							</view>
						</u-number-box>
					</view>
				</view>
			</view>
		</view> -->
		<view class="xmView">
			<view class="flex-row-space-between" style="height: 88rpx;margin-left: 22rpx;">
				<view class="dtTitle">
					陪玩项目
				</view>
			</view>
		
			<view class="itembox">
				<view :class="index == i?'item i':'item'" v-for="(item,i) in detil.service" @click="geti(item,i)"
					:key="i">
					<view :class="index == i?'xmName0':'xmName'" >
						{{item.name}}
					</view>
					<view class="">
						<text :class="index == i?'price0':'price'" >￥</text>
						<text :class="index == i?'price01':'price1'">{{item.price}}</text>
						<text :class="index == i?'price02':'price2'">/{{parseInt(item.duration)}}小时</text>
						<!-- 						<text class="price2">/{{item.duration}}小时</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="bottomLine">

		</view>
		<view class="fixed-bottom">
			<view class="bottomTitle flex-row-center">
				下单付款后达人会在10分钟内联系你哦!
			</view>
			<view class="bottomView flex-row-space-between">
				<view class="flex-row-center">
					<view class="btn-b2" v-if="detil.is_collect==0" @click="follow()">
						<u-icon name="heart-fill" color="#999" size="20"></u-icon>
						<text>收藏</text>
					</view>
					<view class="btn-b2" v-if="detil.is_collect==1" @click="follow()">
						<u-icon name="heart-fill" color="#ff4c4c" size="20"></u-icon>
						<text>取消收藏</text>
					</view>
					<!-- <view class="btn-b1" @click="show = true">
						<u-icon name="red-packet" color="" size="24"></u-icon>
						<text>打赏</text>
					</view> -->
					<view class="btn-b2" @click="toPath('/pages/service/service')">
						<u-icon name="server-fill" color="" size="24"></u-icon>
						<!-- <img style="width: 36rpx;height: 36rpx;" src="/static/a1.png" alt=""> -->
						<text>客服</text>
					</view>
				</view>
				<view class="">
					<text class="money">￥:</text>
					<text class="money1">{{money}}</text>
				</view>
				<view @click="goPay()" class="bottomButton flex-row-center">
					立即下单
				</view>
			</view>
		</view>


		<u-popup :show="show" @close="close" :round="15" @open="open" mode="center">
			<view class="mod-box">
				<view class="modTitle">
					请选择打赏金额(￥)
				</view>
				<view class="moneyList flex-wrap flex-row-center">
					<view class="flex-row-center boxM" :class="money1==item?'boxM1':'boxM'"
						v-for="(item,index) in moneyList" @click="tomoney(item)">
						<text>{{item}}</text>
					</view>
				</view>
				<view class="modTitle">
					请输入打赏金额
				</view>
				<view class="flex-row-center">
					<view class="inputView">
						<input type="number" v-model="money1" placeholder="打赏金额">
					</view>
				</view>
				<view class="modTitle1">
					注意：打赏金额不可退
				</view>
				<view class="flex-row-center">
					<view @click="callMoney()" class="modButton flex-row-center">
						确定
					</view>
				</view>

				<!-- 	<h3>打赏</h3>
			<view class="moneyList">
				<view :class="money1==item?'boxM1':'boxM'" v-for="(item,index) in moneyList" @click="tomoney(item)">
					<text>￥{{item}}</text>
				</view>
			</view>
			<view class="money">
				<text>打赏金额：￥</text>
				<input type="number" v-model="money1" style="width: 50%; border-bottom: 1rpx solid #eee;">
			</view>
			<view class="money" style="color: red;text-align: left;">
				打赏金额不可退
			</view>

			<view class="btnMoney" @click="callMoney()">
				<text>确定打赏</text>
			</view> -->
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		pay
	} from '@/config/utils'
	import config from '../../../tm-vuetify/tool/config/config'
	export default {
		data() {
			return {

				imageIndex: 4,
				url: 'https://a1.easemob.com/1175220727113829/tikangbao2022/chatfiles/f2274ac0-3958-11ed-8939-9d38195bdc46',
				videoImg: "?vframe/jpg/offset/0",
				// url:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
				// videoImg:"?x-oss-process=video/snapshot,t_1,m_fast",
				demo: '',
				videoImage: '',
				kong: '   ',
				item: null,
				list1: [{
						name: '选择项目',
					}
					/* , {
	                    name: '下单须知',
	                }, */
				],
				value: 0,
				detil: '',
				swipe: [],
				service: [],
				arress: [],
				money: 0,
				id: '',
				status: '选择项目',
				images: [],
				video: '',
				show: false,
				show2: false,
				money1: 0,
				moneyList: [],
				index: -1, //选中项目
				phone: '', //客服电话
			}
		},
		onLoad(id) {
			this.getDetil(id.id)
			this.id = id.id
			this.getda()
			this.$http.post('api/sys/ad', {
				id: 18
			}).then(res => {
				/* console.log(res,'xxxx')
				let { mobile } = res; */
				this.phone = res.value;
				// this.technician_mobile = res.value;
			})
		},
		methods: {
			//获取选择的项目
			geti(item, i) {
				// console.log(item, i, '-----------------------------');
				this.index = i
				this.item = item
				this.money = item.price
			},
			toPath(url) {
				// uni.navigateTo({
				// 	url
				// })
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			},
			leftClick() {
				uni.navigateBack()
			},
			previewImageClick(index) {

				uni.previewImage({
					urls: this.images,
					current: index

				})
			},
			videoClick() {
				uni.navigateTo({
					url: '/pages/my/vido?video=' + this.video
				})
			},
			getVideoPoster(url) {
				const that = this;
				let video = document.createElement('video')
				video.setAttribute('crossOrigin', 'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
				video.setAttribute('src', url)
				video.setAttribute('width', 400)
				video.setAttribute('height', 400)
				video.setAttribute('preload', 'auto')
				// uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
				// 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
				// 应先转换成本地地址
				video.addEventListener('loadeddata', function() {
					console.log('视频第一帧加载完')
					let canvas = document.createElement('canvas')
					let width = video.width // canvas的尺寸和图片一样
					let height = video.height
					canvas.width = width
					canvas.height = height
					canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
					const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
					that.demo = dataURL;
					console.log('getVideoPoster-dataURL', dataURL.slice(0, 16))
				})

				video.addEventListener('error', err => {
					console.log('视频加载失败', err)
				})
			},

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			click(item) {
				console.log('item', item);
				this.status = item.name
			},
			goPay() {
				if (this.money == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择项目'
					})
					return
				}
				uni.setStorageSync('dataList', this.detil)
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_order?item=' + JSON.stringify(this.item)
				})
			},
			follow() {
				this.$http.post('api/collect/technician', {
					tid: this.id
				}).then(res => {
					console.log(res, '/////');
					uni.showToast({
						icon: 'none',
						title: res
					});
					this.getDetil(this.id)
					this.money = 0
				})
			},
			goImg(arr) {
				uni.navigateTo({
					url: '/bundle/pages/qualifications/qualifications?img=' + arr
				})
			},
			goImgH(arr) {
				uni.navigateTo({
					url: '/bundle/pages/qualifications/qualificationsH?img=' + arr
				})
			},
			calculation() {
				let num = 0

				setTimeout(() => {
					for (var i = 0; i < this.service.length; i++) {
						num = num + (this.service[i].price * this.service[i].number)
					}
					this.money = num
					console.log(this.money, '**-*-*-');
				}, 100)

			},
			getDetil(id) {
				this.$http.post('api/index/technician/detail', {
					tid: id,
					latitude: 0,
					longitude: 0
				}).then(res => {
					console.log('技师详情', res)
					this.detil = res
					this.swipe = res.album
					this.service = res.service
					this.images = res.dynamic.images
					console.log('this.images', this.images)
					console.log(this.swipe, '---')
					// if(res.dynamic){
					// 	this.item1=res.dynamic[0]
					// 	// this.images=res.dynamic[0].images
					// }
					this.video = res.dynamic.video
					this.url = res.dynamic.video
					this.videoImage = res.dynamic.videoImage
					if (this.url.length) {
						this.imageIndex = 3
						// this.getVideoPoster(this.url)
					}

					for (var i = 0; i < res.service.length; i++) {
						let a = {
							id: res.service[i].id,
							num: 0
						}
						this.arress.push(a)
					}
					console.log(this.arress, '88888');
				})
			},
			callMoney() {
				// #ifdef APP-PLUS
				this.$http.post('api/pay/reward', {
					tid: this.detil.id,
					money: this.money1,
					pay_method: 'app支付宝'
				}).then(res => {
					console.log(res, '-----------------------');
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res, //支付宝订单数据
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								icon: 'none',
								title: '打赏成功'
							});
							this.show = false

						},
						fail: function(err) {

							console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							});

						}
					});
				})
				// #endif
				// #ifdef H5
				this.$http.post('api/pay/reward', {
					tid: this.detil.id,
					money: this.money1,
					pay_method: 'h5微信'
				}).then(res => {
					pay(res).then(res => {
						console.log(res, 'res打印的res ')
						uni.showToast({
							title: res,
							icon: 'success'
						})

					});
					this.show = false
					uni.showToast({
						title: '感谢打赏',
						icon: 'success'
					})

				})
				// #endif

			},
			getda() {
				this.$http.post('api/sys/reward').then(res => {
					this.moneyList = res
				})
			},
			tomoney(money) {
				this.money1 = money
			},
			goteacher() {
				uni.navigateTo({
					url: '/pages/my/introduction?id=' + this.detil.id
				})
			},
			bigimg(e) {
				uni.previewImage({
					urls: this.swipe,
					current: e,
				})
				// console.log(e);
				// this.show2=true
			},
			clkbt(v) {
				uni.navigateTo({
					url: './xiangqing?id=' + v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mod-box {
		width: 652rpx;
		height: 784rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
	}

	.modTitle {
		margin-top: 52rpx;
		margin-left: 60rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.moneyList {
		margin-top: 10rpx;
	}

	.boxM {
		margin: 10rpx;
		width: 164rpx;
		height: 90rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		color: #333333;
		opacity: 1;
	}

	.boxM1 {
		color: #C74BF0;
		border: 2rpx solid #C74BF0;
	}

	.inputView {
		margin-top: 20rpx;
		width: 522rpx;
		height: 90rpx;
		background: #F8F8F8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding-left: 30rpx;

		input {
			width: 100%;
			height: 100%;
		}
	}

	.modTitle1 {
		margin-top: 18rpx;
		margin-left: 78rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.modButton {
		margin-top: 32rpx;
		width: 534rpx;
		height: 102rpx;
		background: linear-gradient(91deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}


	.infoView {
		position: relative;
		padding: 20rpx 28rpx;
		// margin: 24rpx 0rpx;
		// margin-bottom: 0;
		margin-top: -20rpx;
		// height: 188rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		z-index: 9;
	}

	.name {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #3D3D3D;
		line-height: 56rpx;
		// font-size: 32rpx;
		// font-family: PingFang SC-Bold, PingFang SC;
		// font-weight: bold;
		// color: #333333;
	}
	
	.site_province{
		width: 120rpx;
		height: 48rpx;
		margin-left: 20rpx;
		background: rgba(244,209,145,0.47);
		border-radius: 298rpx 298rpx 298rpx 298rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height: 36rpx;
		text-align: left;
	}
	.age{
		width: 128rpx;
		height: 48rpx;
		background: #EDFDFA;
		border-radius: 298rpx 298rpx 298rpx 298rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height: 48rpx;
		margin-right: 20rpx;
		
	}
	.height{
		width: 104rpx;
		height: 48rpx;
		background: #FAF3F6;
		border-radius: 298rpx 298rpx 298rpx 298rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height:  48rpx;
		margin-right: 20rpx;
	}
	.weight{
		width: 104rpx;
		height: 48rpx;
		background: #FAF8F2;
		border-radius: 298rpx 298rpx 298rpx 298rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height:  48rpx;
		margin-right: 20rpx;
	}
	.real {
		// margin-left: 4rpx;
		// width: 68rpx;
		// height: 32rpx;
		// font-size: 20rpx;
		// font-family: PingFang SC-Regular, PingFang SC;
		// font-weight: 400;
		// color: #FFFFFF;
		// background: #C04AF3;
		// border-radius: 4rpx 4rpx 4rpx 4rpx;
		// opacity: 0.3;
		margin-left: 8rpx;
		width: 80rpx;
		height: 40rpx;
		font-size: 26rpx;
		color: #ffffff;
		border-radius: 790rpx;
		background: #FF8E3B;

	}

	.info {
		margin-top: 12rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	
	.info1 {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
	}

	.rzView {
		padding: 0 24rpx;
		margin: 12rpx 0rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.rzTitle {
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.line {
		// margin: 0 12rpx;
		width: 2rpx;
		height: 48rpx;
		background: #F6F6F6;
	}

	.dtView {
		padding: 0 24rpx;
		margin: 12rpx 0rpx;
		margin-top: 0;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.dtTitle {

		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.dtTitle1 {

		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.video-box {
		width: 140rpx;
		height: 140rpx;
		margin-right: 16rpx;
		margin-top: 0rpx;
		border-radius: 8rpx;
		background-color: #f4f4f4;
	}

	.video-box1 {
		width: 100%;
		height: 100%;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.xmView {

		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding: 0 0 20rpx 30rpx;
	}

	.itembox {
		display: flex;
		flex-wrap: wrap;
		width: 720rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 216rpx;
		height: 172rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		border: 1px solid #EEEEEE;
		margin: 0 20rpx 30rpx 0;
		// padding-right: 20rpx;
		// margin: 12rpx 10rpx;
		// margin-top: 0;
		// height: 218rpx;
		// background: linear-gradient(90deg, #B58FF133 0%, #EFEFEF33 100%);
		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		// opacity: 0.2;
	}

	.i {
		color: #FFFFFF;
		background: #DE9CFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 4rpx solid #9D40F3;
	}

	.headView {
		margin: 0 16rpx;
		width: 178rpx;
		height: 178rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #f5f5f5;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
	}

	.xmName {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		// font-weight: bold;
		color: #333333;
	}
	.xmName0 {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		// font-weight: bold;
		color: #fff;
	}
	
	
	.price {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #999999;
		// font-weight: bold;
		// color: #333333;
	}
	
	.price1 {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #999999;
		// font-weight: bold;
		// color: #333333;
	}
	
	.price2 {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #999999;
		// font-weight: bold;
		// color: #333333;
	}
	.price0 {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #fff;
		// font-weight: bold;
		// color: #333333;
	}
	
	.price01 {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #fff;
		// font-weight: bold;
		// color: #333333;
	}
	
	.price02 {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #fff;
		// font-weight: bold;
		// color: #333333;
	}

	.jiedan {
		margin-top: 6rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.jiedan1 {
		margin-top: 6rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #99999900;
	}

	.bottomTitle {
		width: 100%;
		height: 68rpx;
		background: linear-gradient(85deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.bottomView {
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.money {
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.money1 {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ED0606;
	}

	.bottomButton {
		margin-right: 30rpx;
		width: 198rpx;
		height: 76rpx;
		background: linear-gradient( 180deg, #9D40F3 0%, #BA49F1 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.btn-b1 {
		width: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999;
	}

	.btn-b2 {
		width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999;
	}
</style>